import React, { Component } from 'react'
import "./SearchCenter.scss"
import { SearchBar } from "antd-mobile";
import { withRouter } from "react-router-dom"
import myaxios from "../../utils/myaxios"

class SearchCenter extends Component {
  state = {
    inputVal: "",
    productList:[]

  }

  // 点击返回上一页
  handleBackClick = (params) => {
    window.history.go(-1)
  }
  // 获取数据-产品列表
  getProductList = (params) => {
    myaxios
      .get("goods/qsearch", {
        params: {
          query: this.state.inputVal,
        }
      })
      .then((res)=>{
        // console.log(res)
        this.setState({
          productList:res
        })
      })
  }
  // 点击跳转到对应的详情页
  handleItemClick = (e) => {
    let good_id = e.target.getAttribute("data-goods_id")
    this.props.history.push("/goodDetail/" + good_id)
  }
  

  render() {
    return (
      <div className="yg-sc">
        {/* 头部开始 */}
        <div className="yg-sc-head">
          <i
            className="iconfont icon-fanhui-xianxing"
            onClick={this.handleBackClick}
          ></i>
          <span>搜索中心</span>
        </div>
        {/* 头部结束 */}

        {/* 搜索部分开始 */}
        <SearchBar
          className="yg-sc-search"
          placeholder="Search"
          value={this.state.inputVal}
          // 是键盘 按下 enter 键触发
          //   onSubmit={(value) => console.log(value, "onSubmit")}
          // 清除输入内容时触发的
          //   onClear={(value) => console.log(value, "onClear")}
          // 聚焦的时候 触发
          // onFocus={() => console.log("onFocus")}
          // 失焦 触发
          //   onBlur={() => console.log("onBlur")}
          onCancel={() => this.getProductList()}
          showCancelButton
          cancelText="搜索"
          // 内容改变的时候触发
          onChange={(value) => {
            // console.log(value);
            this.setState({
              inputVal: value,
            });
          }}
        />
        {/* 搜索部分结束 */}

        {/* 产品列表开始 */}
        <div 
          className="yg-sc-list"
          onClick={this.handleItemClick}
          >
          {
            this.state.productList.map((v)=>{
              return (
                <div 
                className="sc-list-item" 
                key={v.goods_id}
                data-goods_id={v.goods_id}
                >
                  {v.goods_name}
                </div>
              )
            })
          }
        </div>
        {/* 产品列表结束 */}
      </div>
    )
  }
}
export default withRouter(SearchCenter)